今天要先把昨天寫的東西都給挪到陣列之中，所以我們會需要一個空的陣列
這個陣列因為多個函式會使用到，記得要放在最外層

然後寫一個addTodo的function，讓每次點擊送出時都會將目前input的文字存取到指定陣列中

var todos = new Array;
function addTodo() {
    todos.push({ content: $('#form-control').val(), complete: false });
    document.getElementById('form-control').value = ""
}

推進陣列的東西有文字內容的content跟是否完成的complete兩項
complete都是預設尚未完成，這個項目在後面我們做樣式時用的到，先放進來
推進陣列後就把input清空，這樣更有送出的感覺!!
這邊給大家看console.log

然後我們新增一個update的函式用來更新並顯示目前的ToDoList
內容要去更新陣列的每一個項目，這邊使用的是jQuery的.each這個可以抓取陣列所有東西的方法

function update() {
    $("#add").empty()
    $.each(todos, function (item, index) {
        let tmp = $('#template01');
        let div = tmp.html();
        div = div.replace("CONTENT_HERE", index.content);
        $("#add").append(div)
    });
}

記得要在addTodo()的最後一行呼叫update做更新
並把button的onclick改成addTodo()

接著我們先把每個項目的獨立id製作出來(後續部分會都是文字噢)
用的方法是把所有可以使用的英文大小寫+數字存放在字串中
然後再利用數學.random()來隨機抓取排列
這個部份我是上網看別人怎麼去寫的，因為我不想弄到就是太高級的GUID那樣，所以找了簡化很多的版本

var code = "";
function randomString(len) {
    var str = "mnbvcxzasdfghj012klpoiuytrewq6789MNBVCXZASDFGHJ345KLPOIUYTREWQ"
    var len = str.length;
    var num = 4;
    code = "";
    for (var i = 0; i < num; i++) {
        var rand = Math.ceil(Math.random() * len - 1);
        code += str[rand];
    }
}

一樣因為code會被其他函式使用，所以要放在最外層
用了這個函式之後便會幫我們自動產生一個4碼的隨機字串了

然後我們回到addTodo函式，在最一開始時呼叫它產生一個字串，然後push到todos陣列中，取名叫id: code

比較的部分比較麻煩
首先我們需要在最外層新增一個陣列去存取我們的所有id，不然要挖太多層去做比較
這邊用到的是jQuery的$.map這個方法，因為他有回傳值可以做存取，詳細作用可以上網查查
它可以幫助我們去抓取陣列中每一筆特定名稱的內容
然後我們抓到內容之後把它加入一個叫做result的新陣列
這個陣列一樣放在最外層因為會多處使用
完整寫法長這樣

result = $.map(todos, function (item, index) {
    return item.id;
})

我們把這段程式碼加在update()的第一行
讓每一次todos的陣列內容有更新就去更新result的內容
並在這段程式碼之前加一行result=[]，讓每一次更新前先清空再重新加入
這邊是為了之後做刪除做準備

然後回到addTodo()
我們在第一行呼叫了隨機碼的函式，在.push之前，我們要確認這組字串目前無人使用，不然我們就要再請隨機函式給我們一組新的
所以在.push之前我們要寫一個判別式
判斷目前隨機碼函式做出來的這個code是否在result陣列已經存在了

for (var i = 0; i < result.length; i++) {
    if (code == result[i]) randomString()
}

寫法很簡單，檢查code是否與result陣列的內容相同，相同就在找一組回來，一直到不相同為止
這一串我們加在randomString()的最尾巴，讓code在addTodo()的.push前已經確定是無重複的唯一code了

完整的randomString()跟addTodo()函式長這樣

function randomString() {
    var str = "mnbvcxzasdfghj012klpoiuytrewq6789MNBVCXZASDFGHJ345KLPOIUYTREWQ"
    var len = str.length;
    var num = 4;
    code = "";
    for (var i = 0; i < num; i++) {
        var rand = Math.ceil(Math.random() * len - 1);
        code += str[rand];
    }
    for (var i = 0; i < result.length; i++) {
        if (code == result[i]) randomString()
    }
}
function addTodo() {
    randomString()
    todos.push({ content: $('#form-control').val(), complete: false, id: code });
    document.getElementById('form-control').value = ""
    update()
}

這邊因為是自己使用的ToDoList，我只設了4碼的隨機碼，相信應該是不會使用到超過62x62x62x62個List，然後造成沒有辦法再新增新的code然後出問題的啦(吧?

因為今天的某些內容寫在昨天會太長可能要切斷，但我又不想切斷，所以今天篇幅有點長www
明天介紹id的使用、complete()的完整寫法